import React, { useContext } from 'react';
import { singerTypes, singerAreas, singerAlphas } from '../../api/config';
import Horizen from '../../baseUI/HorizenItem';
import Scroll from '../../baseUI/scroll';
import { NavContainer, List, ListItem, ListContainer } from './style';
import {
  getSingerList,
  getHotSingerList,
  changePageCount,
  changeEnterLoading,
  changePullUpLoading,
  refreshMoreSingerList,
  changePullDownLoading
} from './store/actionCreator';
import { connect } from 'react-redux';
import Loading from '../../baseUI/Loading';
import LazyLoad, { forceCheck } from 'react-lazyload';
import { CategoryDataContext, CHANGE_ALPHA, CHANGE_AREA, CHANGE_TYPE } from './data';

function Singers(props) {
  const { singerList, pullUpLoading, pullDownLoading, pageCount, enterLoading } = props;
  const { updateDispatch, pullUpRefreshDispatch, pullDownRefreshDispatch } = props;

  // const [type, setType] = useState('-1');
  // const [area, setArea] = useState('-1');
  // const [alpha, setAlpha] = useState('');

  const { data, dispatch } = useContext(CategoryDataContext);
  const { type, area, alpha } = data.toJS();

  const handleUpdateAlpha = (val) => {
    dispatch({ type: CHANGE_ALPHA, data: val });
    updateDispatch(type, area, val);
  };

  const handleUpdateType = (val) => {
    dispatch({ type: CHANGE_TYPE, data: val });
    updateDispatch(val, area, alpha);
  };

  const handleUpdateArea = (val) => {
    dispatch({ type: CHANGE_AREA, data: val });
    updateDispatch(type, val, alpha);
  };

  const handlePullUp = () => {
    pullUpRefreshDispatch(type, area, alpha, pageCount);
  };

  const handlePullDown = () => {
    pullDownRefreshDispatch(type, area, alpha);
  };

  const singerListJS = singerList ? singerList.toJS() : [];

  const renderSingerList = () => {
    return (
      <List>
        {
          singerListJS.map((item) => {
            return (
              <ListItem key={item.id}>
                <div className="img_wrapper">
                  <LazyLoad placeholder={<img width="100%" height="100%" src={require ('./singer.png')} alt="music"/>}>
                    <img src={`${item.picUrl}?param=300x300`} width="100%" height="100%" alt="music" />
                  </LazyLoad>
                </div>
                <span className="name">{item.name}</span>
              </ListItem>
            );
          })
        }
      </List>
    );
  };

  return (
    <div>
      <NavContainer>
        <Horizen 
          list={singerTypes} 
          title={'全部:'}
          handleClick={handleUpdateType}
          oldVal={type}
        ></Horizen>
        <Horizen
          list={singerAreas}
          title={'全部:'}
          handleClick={handleUpdateArea}
          oldVal={area}
        ></Horizen>
        <Horizen 
          list={singerAlphas} 
          title={'全部:'}
          handleClick={handleUpdateAlpha}
          oldVal={alpha}
        ></Horizen>
      </NavContainer>
      <ListContainer>
        <Loading show={enterLoading}></Loading>
        <Scroll
          pullUpLoading={ pullUpLoading }
          pullDownLoading={ pullDownLoading }
          pullUp={handlePullUp}
          pullDown={handlePullDown}
          onScroll={forceCheck}
        >
          { renderSingerList() }
        </Scroll>
      </ListContainer>
    </div>
  );
}

const mapStateToProps = (state) => ({
  singerList: state.singers.get('singerList'),
  enterLoading: state.singers.get('enterLoading'),
  pullUpLoading: state.singers.get('pullUpLoading'),
  pullDownLoading: state.singers.get('pullDownLoading'),
  pageCount: state.singers.get('pageCount')
});

const mapDispatchProps = (dispatch) => ({
  getHotSingerDispatch() {
    dispatch(getHotSingerList());
  },
  updateDispatch(type, area, alpha) {
    // 改变了分类，所以pageCount清零
    dispatch(changePageCount(0));
    dispatch(changeEnterLoading(true));
    dispatch(getSingerList(type, area, alpha));
  },
  // 划到最底部刷新部分的处理
  pullUpRefreshDispatch(type, area, alpha) {
    dispatch(changePullUpLoading(true));
    dispatch(refreshMoreSingerList(type, area, alpha));
  },
  // 顶部下拉刷新
  pullDownRefreshDispatch(type, area, alpha) {
    dispatch(changePullDownLoading(true));
    dispatch(changePageCount(0));
    if(type === '-1' && area === '-1' && alpha === '') {
      dispatch(getHotSingerList());
    } else {
      dispatch(getSingerList(type, area, alpha));
    }
  }
});
export default connect(mapStateToProps, mapDispatchProps)(React.memo(Singers));